<template>
  <div class="car-evaluation">
    <div class="header">
      <el-button @click="$router.go(-1)" class="back-button">&lt; 返回</el-button>
      <h1 class="title">二手车评估</h1>
    </div>

    <el-form :model="carForm" ref="carFormRef" label-width="120px">
      <el-form-item label="品牌" prop="brand" :rules="[{ required: true, message: '请输入品牌', trigger: 'blur' }]">
        <el-input v-model="carForm.brand" placeholder="例如：丰田"></el-input>
      </el-form-item>

      <el-form-item label="型号" prop="model" :rules="[{ required: true, message: '请输入型号', trigger: 'blur' }]">
        <el-input v-model="carForm.model" placeholder="例如：卡罗拉"></el-input>
      </el-form-item>

      <el-form-item label="年份" prop="year" :rules="[{ required: true, message: '请输入年份', trigger: 'blur' }]">
        <el-input v-model="carForm.year" placeholder="例如：2018" type="number"></el-input>
      </el-form-item>

      <el-form-item label="价格" prop="price" :rules="[{ required: true, message: '请输入价格', trigger: 'blur' }]">
        <el-input v-model="carForm.price" placeholder="例如：98000" type="number"></el-input>
      </el-form-item>

      <el-form-item label="里程/Km" prop="mileage" :rules="[{ required: true, message: '请输入里程', trigger: 'blur' }]">
        <el-input v-model="carForm.mileage" placeholder="例如：30000" type="number"></el-input>
      </el-form-item>

      <el-form-item label="上传图片" prop="image" :rules="[{ required: true, message: '请上传图片', trigger: 'change' }]">
        <el-upload
            class="upload-demo"
            drag
            :show-file-list="false"
            :before-upload="beforeUpload"
            :limit="1"
            accept="image/png, image/jpeg"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">拖拽文件到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传 JPG/png 格式的图片，且不超过 2MB</div>
        </el-upload>

        <!-- 显示上传的图片 -->
        <div class="image-preview" v-if="carForm.image">
          <img :src="carForm.image.url" alt="Uploaded Image" />
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">提交评估</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const carForm = ref({
  brand: '',
  model: '',
  year: '',
  price: '',
  mileage: '',
  image: null, // 用于存储图片数据
});

const beforeUpload = (file) => {
  const isImage = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    ElMessage.error('上传图片只能是 JPG/PNG 格式!');
    return false;
  }
  if (!isLt2M) {
    ElMessage.error('上传图片大小不能超过 2MB!');
    return false;
  }

  // 创建 FileReader 来读取文件
  const reader = new FileReader();
  reader.onload = (e) => {
    // 设置 carForm.image 为文件的 base64 URL
    carForm.value.image = {
      url: e.target.result,
    };
  };
  reader.readAsDataURL(file);

  return false; // 阻止默认上传
};

const submit = () => {
  console.log(carForm.value); // 提交表单信息
  ElMessage.success('评估信息已提交');
  resetForm(); // 提交后重置表单
};

const resetForm = () => {
  carForm.value = {
    brand: '',
    model: '',
    year: '',
    price: '',
    mileage: '',
    image: null,
  };
};

</script>

<style scoped>
.car-evaluation {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  background-color: #f5f7fa;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.back-button {
  margin-right: 20px; /* 调整按钮与标题的间距 */
}

.title {
  margin: 0; /* 移除标题的默认 margin */
}

.image-preview {
  margin-top: 10px; /* 上方间距 */
  max-width: 100%; /* 图片最大宽度为100% */
}

.image-preview img {
  width: 100%; /* 让图片充满容器宽度 */
  border-radius: 4px; /* 圆角 */
}
</style>
